<template>
  <div class="album-list">
    <div class="list-container">
      <!-- 左侧图片展示 -->
      <div style="width: 200px;" @click="goAlbumDetail">
        <img class="img-border img-width pointer" v-lazy="albumImg ? `${albumImg}?param=300y300` : defaultImg">
      </div>
      <!-- 右侧歌曲列表 -->
      <div class="list-content mleft-20">
        <div class="album-name">
          <span class="font-weight font-16 pointer" @click="goAlbumDetail">
            {{ albumName }}
          </span>
          <a-icon class="font-20 mleft-20 pointer" type="play-circle" @click="getAllPlay" />
          <a-icon class="font-20 mleft-20 pointer" type="folder-add" />
        </div>
        <MyList :columns="columns" :dataSource="show ? tenSongs : albumSong" />
        <div class="more-songs" v-if="isMore && show">
          <a-button @click="show = false;">
            {{ albumName.includes('热门') ? '查看全部50首' : '查看全部歌曲' }}
            <a-icon type="right" />
          </a-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import List from '@/components/Detail/List';

export default {
  name: 'albumList',

  components: {
    MyList: List
  },

  props: {
    albumSong: {
      type: Array,
      default() {
        return []
      }
    },
    // 专辑名称
    albumName: {
      type: String,
      default: '热门50首',
      require: true
    },
    // 专辑图片
    albumImg: {
      type: String,
      default: "",
    },
    // 专辑id
    albumId: {
      type: Number,
      default: undefined
    }
  },

  data() {
    return {
      show: true,
      defaultImg: require('@/assets/images/top50.png'),
      columns: [
        {
          title: '',
          dataIndex: 'index',
          key: 'index',
          width: 30,
          scopedSlots: { customRender: 'key' }
        },
        {
          title: '',
          dataIndex: 'operation',
          key: 'operation',
          width: 30,
          scopedSlots: { customRender: 'operation' }
        },
        {
          title: '音乐标题',
          dataIndex: 'name',
          key: 'name',
          ellipsis: true,
          scopedSlots: { customRender: 'name' }
        },
        {
          title: '时长',
          dataIndex: 'duration',
          key: 'duration',
          ellipsis: true,
          width: 100,
          scopedSlots: { customRender: 'duration' }
        },
      ],
      dataSource: [],
      timer: null
    }
  },

  computed: {
    isMore() {
      if (this.albumSong && this.albumSong.length > 10) {
        return true;
      }
      return false;
    },
    tenSongs() {
      if (this.albumSong && this.albumSong.length) {
        return this.albumSong.slice(0, 10);
      }
      return this.albumSong;
    }
  },

  methods: {
    goAlbumDetail() {
      // 热门歌曲不需要进行跳转
      if (!this.albumId) return;
      this.$router.push({
        name: 'albumdetail',
        query: {
          id: this.albumId
        }
      })
    },
    getAllPlay() {
      // if (this.albumName.includes('热门')) {
      this.$store.commit('main/ISPLAYED', true);
      this.$store.commit('detail/AUDIOID', this.albumSong[0]);
      this.$store.commit('detail/AUDIOLIST', this.albumSong);

      // this.timer = setTimeout(() => {
      //   this.$store.commit('main/ISPLAYED', false);
      // }, 500)
      // }
    }
  },

  // beforeDestroy() {
  //   if (this.timer) {
  //     clearTimeout(this.timer);
  //     this.timer = null;
  //   }
  // }
}
</script>

<style lang="less" scoped>
.album-list {
  margin: 15px 0;
  .list-container {
    display: flex;
    .list-content {
      flex: 1;
      .album-name {
        display: flex;
        align-items: center;
        >i {
          color: #676767;
          &:hover {
            color: #000;
          }
        }
      }
      .more-songs {
        float: right;
        button {
          border: none;
          padding: 0;
          box-shadow: none;
        }
      }
    }
  }
}

</style>